<template>
    <form
        @submit.prevent="handle_submit"
        class="data-form-container"
        ref="form"
    >
        <div class="form-item">
            <input
                type="text"
                maxlength="10"
                placeholder="昵称"
                v-model.trim="form_data.nickname"
            />
            <div class="tip">{{ form_data.nickname.length }}/10</div>
            <div class="error">{{ nickname_err }}</div>
        </div>
        <div class="form-item">
            <textarea
                placeholder="输入内容"
                maxlength="300"
                v-model.trim="form_data.content"
            ></textarea>
            <div class="tip">{{ form_data.content.length }}/300</div>
            <div class="error">{{ content_err }}</div>
        </div>
        <button :disabled="is_submiting">{{ is_submiting ? "提交中···" : "提交" }}</button>
    </form>
</template>

<script>
export default {
    data() {
        return {
            is_submiting: false,
            form_data: {
                nickname: "",
                content: ""
            },
            nickname_err: "",
            content_err: ""
        }
    },
    methods: {
        handle_submit() {
            this.nickname_err = this.form_data.nickname ? "" : "昵称不能为空"
            this.content_err = this.form_data.content ? "" : "请填写内容"
            if (this.nickname_err || this.content_err) {
                return
            }
            this.is_submiting = true
            this.$emit("submit", this.form_data, (msg) => {
                this.form_data.nickname = ""
                this.form_data.content = ""
                this.$show_message({
                    content: msg,
                    type: "success",
                    container: this.$refs.form
                })
                this.is_submiting = false
            })
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.data-form-container {
    margin: 10px 0;
    .form-item {
        position: relative;
        width: max-content;
        margin-bottom: 5px;
        input,
        textarea {
            border: 2px dashed @secondary;
            border-radius: 7px;
            outline: none;
            padding-left: 8px;
            font-size: 14px;
            &:focus {
                border-color: @primary;
            }
        }
        input {
            width: 300px;
            height: 30px;
        }
        textarea {
            width: 900px;
            height: 75px;
        }
        .tip {
            position: absolute;
            right: 10px;
            bottom: 32px;
            color: @secondary;
        }
        .error {
            height: 25px;
            color: @danger;
            font-size: 12px;
            line-height: 25px;
        }
    }
    button {
        padding: 5px 20px;
        outline: none;
        border: none;
        background-color: @primary;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        &:disabled {
            cursor: not-allowed;
            background-color: lighten(@primary, 20%);
        }
    }
}
</style>
